<template>
    <div class="div">
        &nbsp;&nbsp;仪器信息
    </div>
    <table id="dev" cellspacing="1" style="width: 100%;height: 100px;border: 1px solid #a8aeb2;">
        <tr class="tr">
            <th class="thC">序号</th>
            <th class="thB">仪器名称</th>
            <th class="thB">编号</th>
            <th class="thB">有效期</th>
        </tr>
        <tr class="tr" v-if="labRecordDevList.length <= 0" >
            <th class="thC" :colspan="4">——</th>
        </tr>
        <tr class="tr" v-else v-for="(item, index) in labRecordDevList" :key="index">
            <th class="thC">{{ index + 1 }}</th>
            <td class="thB">
                {{ item.devName }}
            </td>
            <td class="thB">
                {{ item.devNum }}
            </td>
            <td class="thB">
                {{ item.devValidity }}
            </td>
        </tr>
    </table>
</template>
  
<script lang="ts" setup>
import { defineProps, defineExpose } from 'vue';


const props = defineProps<{
    labRecordDevList: [{
        id: string,
        taskId: string,
        itemId: string,
        devId: string,
        devName: string,
        devNum: string,
        devValidity: string,
    }]
}>();





defineExpose({
    props,
});


</script>
  
<style scoped>
.div {
    height: 45px;
    border: 1px solid #a8aeb2;
    background-color: #e7eff3;
    text-align: left;
    font: 1.1em sans-serif;
    line-height: 45px
}

.tr {
    height: 50px;
    border: 1px solid #a8aeb2;
}


.thB {
    width: 30%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}

.thC {
    width: 10%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}

.input {
    border: none;
    background-color: inherit;
    outline: none;
    border-bottom: none;
    font: 1.1em sans-serif;
}
</style>